<!DOCTYPE html>
<html>
<head>
	<script src="../../deps/jquery-1.7.1.js"></script>
	<script src="../../deps/raphael-min.js"></script>
<!-- 	<script type="text/javascript" src="../../rm.js"></script> -->
<script type="text/javascript" src="../../rm-core.js"></script>
<script type="text/javascript" src="../../rm-ext.js"></script>
<title>Raphael markup - shape bounds in percentual measures</title>
</head>
<body>

<p>percentual bounds attriubutes support test</p>

<raphael style="display: none">	

<!-- now deifne the paper with some shapes and then use our template: -->

<paper x="0" y="0" width="400" height="400">

	
	<!-- a set with a rectangle and text inside all relative positioned -->
	<set class="set1" x="80%" y="80%" width="20%" height="20%">
		<rect x="0%" y="0%" width="100%" height="100%" fill="blue"></rect>
		<text x="20%" y="20%">
		blue rectangle 20-20
		bottom-left 
		</text>
		
		
		<include-html element="#html1" x="20%" y="20%"></include-html>
	</set>
	
	<!--another set absolute positioned, what  other nested sets -->
	<set class="set1" x="20%" y="30%" width="20%" height="30%">
		<rect x="0%" y="0%" width="100%" height="100%" fill="red"></rect>
		<text x="20%" y="20%">
		red rectangle 20-30
		bottom-left 
		</text>
		
		<path x="50%" y="50%" width="100">M10,20L30,40</path>
	</set>
	
	
<!-- 	<include-html element="#html1" x="180" y="130"></include-html> -->
	
<!-- 	<path transform="t120,120">M10,20L30,40</path> -->
</paper>

<style>
rect{opacity: 0.5}
</style>

</raphael>


<script type="text/javascript">

$(document).ready(function(){
	var rdoc = rm.render()[0];	
})

</script>


<div style="display:none" id="html1">
<p>helloworld</p>
</div>
<style>body{border: 1px solid black;}</style>
</body>
</html>